<!-- vue模板 -->
<template>
    <div class="inventory-container">
        <h5>盘点任务管理</h5>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="未完成盘点单" name="first" >
                <el-button type="primary" style="margin-bottom: 16px;" @click="toAddInvenotory1">添加盘点任务(按货架)</el-button>
                <el-button type="primary" style="margin-bottom: 16px;" @click="toAddInvenotory2">添加盘点任务(按物品)</el-button>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column label="序号" width="60">
                        <template #default="scope">
                            {{ (page - 1) * pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="code" label="盘点单号" width="120" />
                    <el-table-column prop="taskName" label="盘点名称" width="150" />
                    <el-table-column label="盘点方式" width="80">
                        <template #default="scope">
                            {{ getTaskTypeText(scope.row.taskType) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stockName" label="盘点仓库" width="100" />
                    <el-table-column label="盘点时间" width="120">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.takeDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="盘点人" width="80" />
                    <el-table-column label="任务生成时间" width="150">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="盘点状态" width="80">
                        <template #default="scope">
                            {{ getStatusText(scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="盘点序号" width="80">
                        <template #default="scope">
                            第{{ scope.row.seq }}次
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <div style="display: flex; gap: 6px;">
                                <el-button type="primary" size="small" @click="toDetail(scope.row.code)">详情</el-button>
                                <el-button type="danger" size="small" @click="handleClick(scope.row)">作废</el-button>
                                <el-button 
                                    v-if="scope.row.status === 1" 
                                    type="danger" 
                                    size="small" 
                                    @click="handleDelete(scope.row)"
                                >删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                                <el-pagination
                                    background
                                    layout="prev, pager, next, jumper, ->, total"
                                    :total="total"
                                    :page-size="pageSize"
                                    :current-page="page"
                                    @current-change="handlePageChange"
                                    style="margin-top: 16px; text-align: right;"
                                />
            </el-tab-pane>
            <el-tab-pane label="已完成盘点单" name="second">
                <!-- 查询表单区域 -->
                <el-form :inline="true" class="search-form" style="margin-bottom: 16px;">
                  <el-form-item label="盘点单号：">
                    <el-input v-model="searchForm.code" size="small" style="width: 120px;" />
                  </el-form-item>
                  <el-form-item label="任务名称：">
                    <el-input v-model="searchForm.taskName" size="small" style="width: 180px;" />
                  </el-form-item>
                  <el-form-item label="盘点方式：">
                    <el-select v-model="searchForm.type" size="small" style="width: 120px;">
                      <el-option label="请选择" value="" />
                      <el-option label="按物品" value="1" />
                      <el-option label="按货架" value="2" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="盘点仓库：">
                    <el-select v-model="searchForm.storeName" size="small" style="width: 120px;">
                      <el-option label="请选择" value="" />
                      <el-option label="广州总仓" value="1" />
                      <el-option label="广东海鲜仓" value="2" />
                      <el-option label="郑州总仓" value="3" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="盘点库区：">
                    <el-select v-model="searchForm.wareName" size="small" style="width: 120px;">
                      <el-option label="请选择" value="" />
                      <el-option label="生鲜库区" value="生鲜库区" />
                      <el-option label="蔬菜库区" value="蔬菜库区" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="盘点人：">
                    <el-input v-model="searchForm.userName" size="small" style="width: 120px;" />
                  </el-form-item>
                  <el-form-item label="盘点状态：">
                    <el-select v-model="searchForm.status" size="small" style="width: 120px;">
                      <el-option label="请选择" value="" />
                      <el-option label="已盘点" value="已盘点" />
                      <el-option label="已作废" value="已作废" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="任务下达时间：">
                    <el-date-picker v-model="searchForm.startTime" size="small" style="width: 120px;" placeholder="起始时间" type="date" />
                    <el-date-picker v-model="searchForm.endTime" size="small" style="width: 120px;" placeholder="截至时间" type="date" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" plain size="small" @click="onSearch">查询</el-button>
                  </el-form-item>
                </el-form>
                <el-table :data="tableData1" stripe style="width: 100%">
                    <el-table-column label="序号" width="60">
                        <template #default="scope">
                            {{ (page1 - 1) * pageSize1 + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="code" label="盘点单号" width="120" />
                    <el-table-column prop="taskName" label="盘点名称" width="150" />
                    <el-table-column label="盘点方式" width="80">
                        <template #default="scope">
                            {{ getTaskTypeText(scope.row.taskType) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stockName" label="盘点仓库" width="100" />
                    <el-table-column prop="wareName" label="盘点库区" width="100" />
                    <el-table-column label="盘点时间" width="120">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.takeDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="盘点人" width="80" />
                    <el-table-column label="任务生成时间" width="150">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="盘点状态" width="80">
                        <template #default="scope">
                            {{ getStatusText(scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="盘点序号" width="80">
                        <template #default="scope">
                            第{{ scope.row.seq }}次
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template #default="scope">
                            <div style="display: flex; gap: 6px;">
                                <el-button type="primary" size="small" @click="toDetail(scope.row.code)">详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                                <el-pagination
                                    background
                                    layout="prev, pager, next, jumper, ->, total"
                                    :total="total1"
                                    :page-size="pageSize1"
                                    :current-page="page1"
                                    @current-change="handlePageChange1"
                                    style="margin-top: 16px; text-align: right;"
                                />
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<!-- 组件逻辑-->
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const activeName = ref('first');
import { queryInventoryTask, queryInventoryFinishTask, deleteTaskByTaskCode } from '@/api/Inventory/task.js'
const tableData = ref([]);
const page = ref(1);
const pageSize = ref(9);
const total = ref(0);

const tableData1 = ref([]);
const page1 = ref(1);
const pageSize1 = ref(10);
const total1 = ref(0);

const router = useRouter();

// 时间格式化函数
function formatDateTime(dateTimeStr) {
    if (!dateTimeStr) return '';
    return dateTimeStr.replace('T', ' ');
}

// 盘点方式映射
function getTaskTypeText(taskType) {
    const typeMap = {
        0: '按货架',
        1: '按物品'
    };
    return typeMap[taskType] || '未知';
}

// 盘点状态映射
function getStatusText(status) {
    const statusMap = {
        1: '待盘点',
        2: '盘点中', 
        3: '待调整',
        4: '已完成',
        5: '已作废'
    };
    return statusMap[status] || '未知';
}

function toDetail(code) {
    router.push({ name: '盘点任务详情(分组展示)', query: { code } });
}   

function toAddInvenotory1() {
    router.push({ name: '添加盘点任务(按货架)' });
}

function toAddInvenotory2() {
    router.push({ name: '添加盘点任务(按物品)' });
}
function handleDelete(row) {
    ElMessageBox.confirm(
        `确定要删除盘点任务"${row.taskName}"吗？`,
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteTaskByTaskCode(row.code).then(res => {
             if (res.code === 200) {
                 ElMessage.success('删除成功');
                 init();
             }
        }).catch(err => {
            ElMessage.error('删除失败：' + err.message);
        });
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
}

const searchForm = ref({
  code: '',
  taskName: '',
  type: '',
  storeName: '',
  wareName: '',
  userName: '',
  status: '',
  startTime: '',
  endTime: ''
});

function onSearch() {
  let params = {
    page: page1.value,
    pageSize: pageSize1.value,
    ...searchForm.value
  };
}

async function init() {
    let params = {
        page: page.value,
        pageSize: pageSize.value
    };
    const res = await queryInventoryTask(params);
    if (res.code == 200) {
        tableData.value = res.data.list;
        total.value = res.data.total || 0;
    }
}

function handlePageChange(val) {
    page.value = val;
    init();
}

async function init1() {
    let params = {
        page: page1.value,
        pageSize: pageSize1.value
    };
    const res = await queryInventoryFinishTask(params);
    if (res.code == 200) {
        tableData1.value = res.data.list;
        total1.value = res.data.total || 0;
    }
}

function handlePageChange1(val) {
    page1.value = val;
    init1();
}

onMounted(() => {
    init();
    init1();
});
</script>

<!-- 组件样式 -->
<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.inventory-container {
    padding: 20px;
    background-color: white;
}

</style>